<template>
  <div v-if="!messages">
    <p>No messages available...</p>
  </div>

  <div v-else>
    <p>Messages:</p>
    <div
      v-for="(message, index) in messages"
      v-bind:key="index"
      class="message"
    >
      <span>🗨 {{ message.subject }} &bull; {{ message.date }}</span>
      <span class="meta">&nbsp;&bull; {{ message.interactionId }}</span>
      <span class="meta">&nbsp;&bull; {{ message.eventId }}</span>
      <br />
      <object v-html="message.content" alt="Message body content."></object>
      <ul>
        <li v-for="(file, index) in message.attachments" v-bind:key="index">
          <FileDownload
            v-bind:endpoint="downloadService"
            v-bind:filename="file.filename"
            v-bind:id="file.id"
          ></FileDownload>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import FileDownload from "@/components/FileDownload.vue";
import { mapGetters } from "vuex";

export default {
  name: "Messages",
  components: {
    FileDownload
  },
  props: ["messages"],
  computed: {
    ...mapGetters(["api", "readonly"]),
    downloadService: function() {
      return this.api.download;
    }
  }
};
</script>

<style scoped>
.message {
  margin: 10px 0;
  padding: 2px 10px;
  background-color: var(--brand-colour);
  border-radius: 4px 10px;
}
.message .meta {
  display: none;
}
.message ul {
  font-weight: bold;
}
</style>
